<template>
    <div>


    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row breadcrumb_box  align-items-center">
                        <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                            <h2 class="breadcrumb-title">商品详情</h2>
                        </div>
                        <div class="col-lg-6  col-md-6 col-sm-12">
                            <!-- breadcrumb-list start -->
                            <ul class="breadcrumb-list text-center text-md-right">
                                <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
                                <li class="breadcrumb-item"><router-link to="/shop/shopping">所有商品</router-link></li>
                                <li class="breadcrumb-item active">商品详情</li>
                            </ul>
                            <!-- breadcrumb-list end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- breadcrumb-area end -->

    <!-- 商品详情 -->
    <div class="product-details-area pt-100px pb-100px">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-12 col-xs-12 mb-lm-30px mb-md-30px mb-sm-30px">
                    <!-- Swiper -->
                    <div class="swiper-container zoom-top">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide zoom-image-hover">
                                <img class="img-responsive m-auto" :src="$store.state.imgURLPre+book.bookImages" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-sm-12 col-xs-12" data-aos="fade-up" data-aos-delay="200">
                    <div class="product-details-content quickview-content">
                        <h2>{{book.bookTitle}}</h2>
                        <p class="reference">作者:<span>{{book.bookAuthors}}</span></p>
                        <div class="pro-details-rating-wrap">
                            <div class="rating-product">
                                <i class="ion-android-star"></i>
                                <i class="ion-android-star"></i>
                                <i class="ion-android-star"></i>
                                <i class="ion-android-star"></i>
                                <i class="ion-android-star"></i>
                            </div>
                            <span class="read-review"><a class="reviews" href="#">数量 ({{book.bookQuantityInput-book.bookQuantityOutput}})</a></span>
                        </div>
                        <div class="pricing-meta">
                            <ul>
                                <li class="old-price not-cut">￥{{book.bookNewPrice}}</li>
                            </ul>
                        </div>
                        <p class="quickview-para" v-html="book.bookDescribe"></p>
                        <p class="reference">出版社:<span>{{publisherName}}</span></p>
                        <p class="reference">分类:<span>{{categoryName}}</span></p>
                        <p class="reference">ISBN:<span>{{book.bookIsbn}}</span></p>
                        <p class="reference">版别:<span>{{book.bookLanguage}}</span></p>
                        <div class="pro-details-quality">
                               <el-input-number v-model="count" :min="1"></el-input-number>
                            <div class="pro-details-cart">
                                <button class="add-cart btn btn-primary btn-hover-primary ml-4" @click="addCart(book.id,count)">加入购物车</button>
                            </div>
                        </div>
                        <div class="pro-details-wish-com">
                            <div class="pro-details-wishlist">
                                 <a @click="addWishList(book.id)"><i class="el-icon-star-on" v-if="wishList.some(e=>e.id===book.id)">已收藏</i>
                              <i class="el-icon-star-off" v-else>添加到收藏</i></a
                                >
                            </div>
                           
                        </div>
                        <div class="pro-details-social-info">
                            <span>Share</span>
                            <div class="social-info">
                                <ul class="d-flex">
                                    <li>
                                        <a href="#"><i class="ion-social-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="ion-social-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="ion-social-google"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="ion-social-instagram"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pro-details-policy">
                            <ul>
                                <li><img src="@/assets/images/icons/policy.png" alt="" /><span>安全策略 (编辑方式客户保证模块)</span></li>
                                <li><img src="@/assets/images/icons/policy-2.png" alt="" /><span>交货政策 (编辑方式客户保证模块)</span></li>
                                <li><img src="@/assets/images/icons/policy-3.png" alt="" /><span>退货政策 (编辑方式客户保证模块)</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 导航切换-->
    <div class="description-review-area pb-100px" data-aos="fade-up" data-aos-delay="200">
        <div class="container">
            <div class="description-review-wrapper">
                <div class="description-review-topbar nav">
                    <a data-bs-toggle="tab" href="#des-details1">描述</a>
                    <a class="active" data-bs-toggle="tab" href="#des-details2">详细参数</a>
                    <a data-bs-toggle="tab" href="#des-details3">评论（{{comments.length}}）</a>
                </div>
                <div class="tab-content description-review-bottom">
                    <div id="des-details2" class="tab-pane active">
                        <div class="product-anotherinfo-wrapper">
                            <ul>
                                <li><span>重量</span> 400 g</li>
                                <li><span>尺寸</span>10 x 10 x 15 cm</li>
                                <li><span>材料</span> 纸</li>
                                <li><span>其他信息</span> 这本书很好看</li>
                            </ul>
                        </div>
                    </div>
                    <div id="des-details1" class="tab-pane">
                        <div class="product-description-wrapper">
                            <p v-html="book.bookDescribe">
                            </p>
                        </div>
                    </div>
                    <div id="des-details3" class="tab-pane">
                        <div class="row">
                            <div class="col-lg-10" v-for="(item,index) in comments.filter(e=>e.parentId===0)" :key="index" style="margin-left: 50px;margin-top: 50px;">
                                <div class="review-wrapper" >
                                    <!-- 主评论 -->
                                    <div class="single-review" >
                                        <div class="review-img">
                                            <el-avatar :size="120" :src="$store.state.imgURLPre+item.userImages"></el-avatar>
                                        </div>
                                        <div class="review-content">
                                            <div class="review-top-wrap">
                                                <div class="review-left" style="margin-left: 50px;">
                                                    <div class="review-name">
                                                        <h4>{{item.userNickName}}</h4>
                                                    </div>
                                                    <div class="rating-product">
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                    </div>
                                                </div>
                                                <div class="review-left" style="margin-left: 50px;">
                                                     <el-button type="primary" plain @click="showDialog(item.id)">回复</el-button>
                                                </div>
                                            </div>
                                            <div class="review-bottom" style="margin-left: 50px;margin-top: 30px;">
                                                <p>
                                                   {{item.commentContent}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 子评论 -->
                                    <div class="single-review child-review" v-for="(child,index2) in item.children" :key="index2" style="margin-left: 120px;margin-top: 30px;">
                                        <div class="review-img" style="margin-left: 50px;">
                                            <el-avatar :size="70" :src="$store.state.imgURLPre+child.userImages"></el-avatar>
                                        </div>
                                        <div class="review-content">
                                            <div class="review-top-wrap">
                                                <div class="review-left" style="margin-left: 50px;">
                                                    <div class="review-name">
                                                        <h4>{{child.userNickName}}</h4>
                                                    </div>
                                                    <div class="rating-product">
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                        <i class="ion-android-star"></i>
                                                    </div>
                                                </div>
                                                <div class="review-left">
                                                    <!-- <a>回复</a> -->
                                                </div>
                                            </div>
                                            <div class="review-bottom" style="margin-left: 50px;margin-top: 15px;">
                                                <p>{{child.commentContent}}</p>
                                            </div>
                                        </div>
                                    </div>
                                   
                                </div>
                            </div>
                            
                            <div class="col-lg-10" style="margin-top: 50px;">
                                <div class="ratting-form-wrapper pl-50">
                                    <div class="ratting-form">
                                            <div class="star-box">
                                                <span>你的评级:</span>
                                                <div class="rating-product">
                                                    <el-rate v-model="value"></el-rate>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                        <el-input
                                                        type="textarea"
                                                        :rows="5"
                                                        placeholder="请输入评论"
                                                        v-model="commentContent">
                                                        </el-input>
                                                        <button class="btn btn-primary btn-hover-color-primary" @click="addComment(0)" style="margin-top: 20px;">提交</button>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- product details description area end -->

    <!-- 你也许喜欢商品 -->
    <div class="section pb-100px" data-aos="fade-up" data-aos-delay="200">
        <div class="container">
            <!-- section title start -->
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-left mb-11">
                        <h2 class="title">您也许会喜欢</h2>
                    </div>
                </div>
            </div>
            <!-- 四个商品 -->
            <div class="tab-pane fade show active" id="tab-product-new-arrivals">
                            <div class="row">
                                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6" data-aos="fade-up" data-aos-delay="200"
                                v-for="(l,i) in likeBook" :key="i"
                                >
                                    <!-- Single Prodect -->
                                    <div class="product">
                                        <div class="thumb">
                                            <a class="image">
                                                <img :src="$store.state.imgURLPre+l.bookImages" alt="Product"  height="362" width="313"  @click="toInfo(l.id)"/>
        
                                            </a>
                                            <span class="badges">
                                                <span class="new">New</span>
                                            </span>
                                            <div class="actions">
                                                 <a
                                                class="action wishlist"
                                                title="Wishlist"
                                                @click="addWishList(l.id)"
                                                > <i class="el-icon-star-on" v-if="wishList.some(e=>e.id===l.id)"></i>
                                                    <i class="el-icon-star-off" v-else></i></a>
                                                <a class="action quickview" data-link-action="quickview" title="Quick view" 
                                                @click="showInfo(l)"
                                                ><i
                                                        class="icon-size-fullscreen" ></i></a>
                                            
                                            </div>
                                            <button title="Add To Cart" class=" add-to-cart" @click="addCart(l.id)">添加购物车</button>
                                        </div>
                                        <div class="content">
                                            <h5 class="title"><a>{{i.bookTitle}} </a></h5>
                                            <span class="price">
                                                 <span class="new">￥{{ l.bookNewPrice }}</span>
                                                 <span class="old">￥{{ l.bookOldPrice }}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                              
                            </div>
            </div>
        </div>
    </div>

    <!-- New Product End -->

    <!-- 相似商品 -->
    <div class="section pb-100px" data-aos="fade-up" data-aos-delay="200">
        <div class="container">
            <!-- section title start -->
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-left mb-11">
                        <h2 class="title">其他同类产品</h2>
                    </div>
                </div>
            </div>
             <!-- 四个商品 -->
            <div class="tab-pane fade show active" id="tab-product-new-arrivals">
                            <div class="row">
                                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6" data-aos="fade-up" data-aos-delay="200"
                                v-for="(i,j) in similar" :key="j"
                                >
                                    <!-- Single Prodect -->
                                    <div class="product">
                                        <div class="thumb">
                                            <a class="image">
                                                <img :src="$store.state.imgURLPre+i.bookImages" alt="Product" height="362" width="313"  @click="toInfo(i.id)"/>
                                                
                                            </a>
                                            <span class="badges">
                                                <span class="new">New</span>
                                            </span>
                                            <div class="actions">
                                                 <a
                                                class="action wishlist"
                                                title="Wishlist"
                                                @click="addWishList(i.id)"
                                                > <i class="el-icon-star-on" v-if="wishList.some(e=>e.id===i.id)"></i>
                                                    <i class="el-icon-star-off" v-else></i></a>
                                                
                                                <a class="action quickview" data-link-action="quickview" title="Quick view"
                                                @click="showInfo(i)"
                                                ><i
                                                        class="icon-size-fullscreen" ></i></a>
                                              
                                            </div>
                                            <button title="Add To Cart" class=" add-to-cart" @click="addCart(i.id)">添加购物车</button>
                                        </div>
                                        <div class="content">
                                            <h5 class="title"><a >{{i.bookTitle}} </a></h5>
                                            <span class="price">
                                                 <span class="new">￥{{ i.bookNewPrice }}</span>
                                                 <span class="old">￥{{ i.bookOldPrice }}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                               
                               
                            </div>
            </div>
        </div>
    </div>

    <!-- New Product End -->

    <el-dialog
  title="回复评论"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <div class="star-box" style="margin-bottom: 20px;">
            <span>你的评级:</span>
            <div class="rating-product">
                <el-rate v-model="value"></el-rate>
            </div>
        </div>
   <el-input
    type="textarea"
    :rows="5"
    placeholder="请输入评论"
    v-model="commentContent">
    </el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addComment(pid)">确 定</el-button>
  </span>
</el-dialog>
  <el-dialog :visible.sync="dialogVisible2" width="50%">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-5 col-sm-12 col-xs-12 mb-lm-30px mb-sm-30px">
            <!-- Swiper -->
            <div class="swiper-container gallery-top mb-4">
              <img
                class="img-responsive m-auto"
                :src="$store.state.imgURLPre+info.bookImages"
                alt=""
              />
            </div>
          </div>
          <div class="col-md-7 col-sm-12 col-xs-12">
            <div class="product-details-content quickview-content">
              <h2>{{info.bookTitle}}</h2>
              <p class="reference">作者:<span>{{info.bookAuthors}}</span></p>
              <div class="pro-details-rating-wrap">
                <div class="rating-product">
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                </div>
                <span class="read-review"
                  ><a class="reviews" href="#">剩余数量({{info.bookQuantityInput-info.bookQuantityOutput}})</a></span
                >
              </div>
              <div class="pricing-meta">
                <ul>
                  <li class="old-price not-cut">￥{{info.bookNewPrice}}</li>
                </ul>
              </div>
              <p class="quickview-para" v-html="info.bookDescribe">
                
              </p>
              
              <div class="pro-details-quality">
                <div class="cart-plus-minus">
                  <input
                    class="cart-plus-minus-box"
                    type="text"
                    name="qtybutton"
                    value="1"
                    v-model="count"
                  />
                </div>
                <div class="pro-details-cart btn-hover">
                  <button
                    class="add-cart btn btn-primary btn-hover-primary ml-4"
                    @click="addCart(info.id,count)"
                  >
                    添加到购物车
                  </button>
                </div>
              </div>
              <div class="pro-details-wish-com">
                <div class="pro-details-wishlist">
                 <a @click="addWishList(info.id)"><i class="el-icon-star-on" v-if="wishList.some(e=>e.id===info.id)">已收藏</i>
                              <i class="el-icon-star-off" v-else>添加到收藏</i></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    </div>
</template>

<script>
import API from "@/api/request";
const url = "/api/msslyyBook";
export default {
    name: 'BookShopBookdetail',

    components: {  },

    directives: {  },

    data() {
        return {
             info:{},
             dialogVisible:false,
             value: null,
             id:0,
             book:{},
             publisherName:'',
             categoryName:'',
             user:{},
             count:1,
             wishList:[],
             comments:[],
             commentContent:'',
             pid:0,
             similar:[],
             likeBook:[],
             dialogVisible2:false
        };
    },

    mounted() {
        
    },
    created(){
        this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
        this.id=this.$route.params.id
        this.getBookById()
        this.addFootPrint()
        this.getWishList()
        this.getComments()
        
       
    },

    methods: {
        toInfo(id){
             this.id=id
             this.getBookById()
            //  this.$router.replace('/shop/bookdetail/'+id)
          
        },
        showInfo(item){
          this.info=item
          this.dialogVisible2=true
        },
        //也许喜欢四种
        getLike(){
            API.get(`/api/msslyyBook/like`).then((res) => {
                if (res.data!==null) {
                this.likeBook = res.data
                } else {
                this.likeBook=[]
                }
                console.log(this.likeBook);
                
            });
        },
        //同种类商品四种
        getSimilar(){
            API.get(`/api/msslyyBook/classIf/${this.book.publisherId}/${this.book.id}`).then((res) => {
                if (res.data!==null) {
                this.similar = res.data
                } else {
                this.similar=[]
                }
                
            });
        },
        showDialog(id){
            this.pid=id
            this.dialogVisible=true
        },
        addComment(parentId){
            let comment={}
            comment.bookId=this.id
            comment.userId=this.user.id
            comment.commentContent=this.commentContent
            comment.parentId=parentId
            API.post("/api/msslyyComment",comment).then((res) => {
                if (res.code === "0") {
                    this.$message({
                        type: "success",
                        message: "评论成功",
                        });
                this.commentContent=''
                this.dialogVisible=false
                this.getComments()
                }
                
            });
        },
        getComments(){
            API.post(`/api/msslyyComment/getCommentByBookId/${this.id}`).then((res) => {
                if (res.data!==null) {
                this.comments = res.data
                } else {
                this.comments=[]
                }
                console.log(this.comments);
                
            });
        },
        addWishList(bookId) {
      if (sessionStorage.getItem("user1") != null) {
        API.get(`/api/msslyyWishlist/add/${bookId}/${this.user.id}`).then(
          (res) => {
            if (res.code === "0") {
              if (res.data === 1) {
                this.$message({
                  type: "success",
                  message: "收藏成功",
                });
                this.getWishList();
                this.getBookById();
              } else {
                this.$message({
                  type: "info",
                  message: "取消收藏成功",
                });
                this.getWishList();
                this.getBookById();
              }
            }
          }
        );
      } else {
        this.$message({
          type: "danger",
          message: "请先登录"
        })
      }
        },
        getWishList() {
      API.get(url + "/getBookListById2/" + this.user.id).then((res) => {
        if (res.data!==null) {
          this.wishList = res.data|| [];
        } else {
          this.wishList=[]
        }
        
      });
        },
        addCart(bookId,cartAmount=1){
      if (this.user) {
         API.post(`/api/msslyyCart/addCart/${this.user.id}/${bookId}/${cartAmount}`).then((res) => {
          this.$message({
          type: "success",
          message: "添加成功"
          })
          this.count=1
        
      });
      } else {
        this.$message({
          type: "danger",
          message: "请先登录"
        })
      }
        },
        addFootPrint(){
            if (this.user) {
                let footprint={}
            footprint.bookId=this.id
            footprint.userId=this.user.id
            API.post("/api/msslyyFootprint",footprint).then((res) => {
                if (res.code === "0") {
                    console.log("添加足迹成功");
                }
                });
            }
            
        },
        getBookById(){
            API.get(url+"/"+this.id).then((res) => {
        if (res.code === "0") {
          this.book = res.data;
          this.getPublisherById()
          this.getCtegoryById()
          this.getSimilar()
          this.getLike();
        }
      });

        },
        getPublisherById(){
             API.get("/api/msslyyPublisher/"+this.book.publisherId).then((res) => {
                if (res.code === "0") {
                    this.publisherName=res.data.publisherName
                }
            });
        },
        getCtegoryById(){
             API.get("/api/msslyyCategory/"+this.book.categoryId).then((res) => {
                if (res.code === "0") {
                    this.categoryName=res.data.categoryName
                }
            });
        },
        
    },
};
</script>

<style  scoped>
.a{
    margin-left: 100px;
    
}

</style>